{% extends "manage/stats_base.html" %}

{% block sub_content %}
<h4>该表格仅仅包含第一张地图的统计<small>数据加载中，请稍后</small></h4>
<small>x轴为课程步骤，y轴为步骤数量。统计时间段为所有。
    饼图表示所有步骤各个时长数量的占比；柱状图表示各个步骤各个时长的数量；曲线图为各个步骤各个时长总数量/10的曲线，反映出步骤使用的频度
</small>
<div id="container" style="min-width:700px;height:600px"></div>
{% endblock %}

{% block js %}
<script type="text/javascript" src="/static/libs/Highcharts-4.1.9/js/highcharts.js"></script>
<script type="text/javascript" src="/static/libs/Highcharts-4.1.9/js/modules/exporting.js"></script>
<script type="text/javascript">

function showMainChart(){
    var url = '/manage/statistics/ajax/step_chart_data';
    $.get(url, function(data){

        var categories = data.titles;
        var options = {
            title: {
                text: '步骤时长统计分析'
            },
            xAxis: { 
                categories: categories
            },
            labels: {
                items: [{
                    html: '总体时长占比',
                    style: { 
                        left: '40px',
                        top: '8px',
                        color: 'black'
                    }
                }]
            }
        };

        var legends = ['无效统计', '0-1min', '1-2min', '>2min'];
        var legendKeys = ['0s', '60s', '60s-120s', '120s'];
        var colors = ['grey', '#2f7ed8', '#8bbc21', '#910000'];
        var chartData = data['data'];
        var columnSeries = [];
        for(var i=0; i<legends.length; i++){
            var s = {type: 'column', name: legends[i]};
            var arr = [];
            for(var j=0; j<data.titles.length; j++){
                arr.push(chartData[j][legendKeys[i]]);
            }
            columnSeries.push({type: 'column', name: legends[i], data: arr, color: colors[i]});
        }

        // sum the columnSeries data
        var pieSeriesData = [];
        for(var k=0; k<legends.length; k++){

            var sData = {
                name: legends[k],
                color: colors[k],
                y: columnSeries[k].data.reduce(function (pre, cur){
                    // sum the array 
                    return pre + cur;
                })
            }
            pieSeriesData.push(sData);
        }

        var pieSeries = {
            type: 'pie',
            name: '时长总体占比',
            data: pieSeriesData,
            center: [150, 0],                                            
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false                                         
            }  
        };

        // get total number for computing the percent
        var total = 0;
        for (var i=0; i<legends.length; i++){
            total += pieSeriesData[i].y;
        }

        var tooltip = {                                                        
            formatter: function() {                                       
                var s;                                                    
                if (this.point.name) { // the pie chart  
                    var percent = (100*this.y/total).toFixed(2) + '%';                 
                    s = ''+                                               
                        this.point.name +': '+ this.y +' ' + percent;         
                } else {                                                  
                    s = ''+                                               
                        this.x  +': '+ this.y;                            
                }                                                         
                return s;                                                 
            }                                                             
        };  

        options.tooltip = tooltip;

        // line Series
        var lineSeries = {
            type: 'spline',
            name: 'Step Total',
            // div 10 to reduce the number
            data: data['per_step_numbers'].map(function(item){return parseInt(item/10);}),
            marker: {                                                     
                lineWidth: 2,                                               
                lineColor: Highcharts.getOptions().colors[3],               
                fillColor: 'white'                                          
            }  
        };

        var series = columnSeries.slice();
        series.push(pieSeries, lineSeries);

        options.series = series;
        $('#container').highcharts(options);

        // remove the small info
        $('h4 small').text('');
    }, 'json');
}

$(function () {
    showMainChart();
});                                                                                     
</script>
{% endblock %}
